<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->

<div class="live-demo-wrap">
    <h2>国际化</h2>
    <h2>点击按钮，切换中英文</h2>
    <jigsaw-button (click)="changeLang('en')">
        change language to English
    </jigsaw-button>
    <jigsaw-button (click)="changeLang('zh')">
        change language to Chinese
    </jigsaw-button><br>

    <div class="demo-1 live-demo">
        <h3>普通数据</h3>
        <j-transfer width="50%" height="200" [data]="data" labelField="zhName" subLabelField="shortName"
                    [searchable]="true" (selectedItemsChange)="handleSelectChange($event)"
                    [selectedItems]="selectedCountries"></j-transfer>
        <p class="message">选择的地区：{{selectedCountriesStr}}</p>

        <h3>本地分页数据</h3>
        <j-transfer width="50%" height="200" [data]="data_page" labelField="zhName" subLabelField="shortName"
                    [searchable]="true" (selectedItemsChange)="handleSelectChange($event)"
                    [selectedItems]="selectedCountries"></j-transfer>
        <p class="message">选择的地区：{{selectedCountriesStr}}</p>
    </div>
</div>
